<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='UTF-8'>
     <meta name='viewport' content='width=device-width, initial-scale=1.0'>
     <title>对元素的增加删除克隆等操作</title>
     <link rel='stylesheet' href='https://cdn.bootcdn.net/ajax/libs/highlight.js/11.7.0/styles/atom-one-dark.min.css'>
     <script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/highlight.min.js'></script>
</head>
<body>
    <input type="text" id="add-input" placeholder="输入要添加的文本">
    <button class="add-button">向页面添加指定内容</button>
    <button class="remove-last-child">删除末尾的节点</button>
    <button class="deep-clone">深克隆当前盒子元素</button>
    <button class="shallew-clone">浅克隆当前盒子元素</button>
    <div class="green-box" style="background-color: green; width: 100px;height: 100px;">
        <div class="inner">
            <i>绿色盒子</i>
        </div>
    </div>
     <pre>
        <code style='max-height: 400px;'>
        // 对元素的增加删除克隆等操作 createElement、createTextNode（创建元素标签、创建文本）
        /**
         * @params {HtmlElement} rootEle 父节点
         * @params {string} text 需要填加的文本
         * */ 
        function addEle(rootEle,text){
            let liNode = document.createElement('li')
            liNode.innerText = text
            rootEle.appendChild(liNode)
        }
        let addBtn = document.querySelector('.add-button')
        let textNode = document.querySelector('#add-input')
        // 初始化在pre节点前面添加ul节点
        function init(){
            let ulNode = document.createElement('ul')
            // 使用insertBefore在pre前面插入 ulNode
            /**
             * insertBefore语法
             * var insertedNode = parentNode.insertBefore(newNode, referenceNode);
             * parentNode 是将要插入的节点的父节点 newNode是新插入的节点 referenceNode则代表的是插入在这个节点前面
            */
            document.body.insertBefore(ulNode,document.querySelector('pre'))
        }
        init()
        addBtn.addEventListener('click',() => {
            let value = textNode.value || '输入要添加的文本'
            addEle(document.querySelector('ul'),value)
        })

        function removeLastChild(rootEle){
            // 封装通用方法的话应该进行获取父节点的最后一个节点元素
            let lastChildNode = rootEle.lastChild
            console.log(lastChildNode.nodeType); 
            rootEle.removeChild(lastChildNode)
        }
        let removeLastChildBtn = document.querySelector('.remove-last-child')
        removeLastChildBtn.addEventListener('click',() => {
            removeLastChild(document.querySelector('ul'))
        })

        let deepCloneBtn = document.querySelector('.deep-clone')
        let shallewCloneBtn = document.querySelector('.shallew-clone')

        // 深度克隆  --- 会把当前元素的所有节点样式全都克隆复制一遍
        deepCloneBtn.addEventListener('click',() => {
            let deepCloneNode = document.querySelector('.green-box').cloneNode(true)
            console.log(deepCloneNode);
            document.body.insertBefore(deepCloneNode,document.querySelector('pre'))
        })

        // 浅克隆 只会将当前元素的外壳样式复制一遍 里面的文本不会复制 子节点也不会复制
        shallewCloneBtn.addEventListener('click',() => {
            let shallewCloneNode = document.querySelector('.green-box').cloneNode(false)
            console.log(shallewCloneNode);
            document.body.insertBefore(shallewCloneNode,document.querySelector('pre'))
        })
        </code>
     </pre>
     <script> hljs.highlightAll(); </script>
     <script>
        // 对元素的增加删除克隆等操作 createElement、createTextNode（创建元素标签、创建文本）
        /**
         * @params {HtmlElement} rootEle 父节点
         * @params {string} text 需要填加的文本
         * */ 
        function addEle(rootEle,text){
            let liNode = document.createElement('li')
            liNode.innerText = text
            rootEle.appendChild(liNode)
        }
        let addBtn = document.querySelector('.add-button')
        let textNode = document.querySelector('#add-input')
        // 初始化在pre节点前面添加ul节点
        function init(){
            let ulNode = document.createElement('ul')
            // 使用insertBefore在pre前面插入 ulNode
            /**
             * insertBefore语法
             * var insertedNode = parentNode.insertBefore(newNode, referenceNode);
             * parentNode 是将要插入的节点的父节点 newNode是新插入的节点 referenceNode则代表的是插入在这个节点前面
            */
            document.body.insertBefore(ulNode,document.querySelector('pre'))
        }
        init()
        addBtn.addEventListener('click',() => {
            let value = textNode.value || '输入要添加的文本'
            addEle(document.querySelector('ul'),value)
        })

        function removeLastChild(rootEle){
            // 封装通用方法的话应该进行获取父节点的最后一个节点元素
            let lastChildNode = rootEle.lastChild
            console.log(lastChildNode.nodeType); 
            rootEle.removeChild(lastChildNode)
        }
        let removeLastChildBtn = document.querySelector('.remove-last-child')
        removeLastChildBtn.addEventListener('click',() => {
            removeLastChild(document.querySelector('ul'))
        })

        let deepCloneBtn = document.querySelector('.deep-clone')
        let shallewCloneBtn = document.querySelector('.shallew-clone')

        // 深度克隆  --- 会把当前元素的所有节点样式全都克隆复制一遍
        deepCloneBtn.addEventListener('click',() => {
            let deepCloneNode = document.querySelector('.green-box').cloneNode(true)
            console.log(deepCloneNode);
            document.body.insertBefore(deepCloneNode,document.querySelector('pre'))
        })

        // 浅克隆 只会将当前元素的外壳样式复制一遍 里面的文本不会复制 子节点也不会复制
        shallewCloneBtn.addEventListener('click',() => {
            let shallewCloneNode = document.querySelector('.green-box').cloneNode(false)
            console.log(shallewCloneNode);
            document.body.insertBefore(shallewCloneNode,document.querySelector('pre'))
        })
     </script>
</body>
</html>